<%= partial "partials/action_nav_normal_one_row" %>

<hr class="divider">

<%= partial "partials/action_nav_normal_rounded" %>

<hr class="divider">

<div class="row-fluid">
  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">Button styles</span>
        <ul class="box-toolbar">
          <li><span class="label label-red">22</span></li>
        </ul>
      </div>

      <div class="box-content padded">

        <div class="page-header">
          <h4>Normal buttons</h4>
        </div>

        <% button_colors.each_slice(4) do |colors| %>
            <p>
              <% colors.each do |color| %>
                  <button class="btn btn-<%= color %>">button</button>
              <% end %>
            </p>
        <% end %>

        <% extra_button_styles.each do |style| %>
            <div class="page-header">
              <h4><%= style.capitalize %> buttons</h4>
            </div>
            <% button_colors[0..3].each do |color| %>
                <button class="btn <%= "btn-#{style}" unless style=="normal" %> btn-<%= color %>">button</button>
            <% end %>
        <% end %>
      </div>
    </div>
  </div>

  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">Dropdowns</span>
        <ul class="box-toolbar">
          <li><span class="label label-green">68</span></li>
        </ul>
      </div>
      <div class="box-content padded">

        <% button_styles.each do |style| %>

            <div class="page-header">
              <h4><%= style.capitalize %> dropdowns</h4>
            </div>

            <% button_colors[0..3].each_slice(2) do |colors| %>
                <p>
                  <% colors.each do |color| %>
                    <div class="btn-group">
                      <button class="btn <%= "btn-#{color}"%> <%= "btn-#{style}" unless style=="normal" %> dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  <% end %>
                </p>
            <% end %>

        <% end %>
      </div>
    </div>
  </div>
</div>

<div class="row-fluid">
  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">Split dropdowns</span>
        <ul class="box-toolbar">
          <li>
            <input class="iButton-icons" type="checkbox" checked="checked" />
          </li>
        </ul>
      </div>
      <div class="box-content padded">

        <% button_colors[0..3].each do |color| %>

            <div class="btn-group">
              <button class="btn <%= "btn-#{color}" %>">Actions</button>
              <button class="btn <%= "btn-#{color}" %> dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>

        <% end %>

      </div>
    </div>
  </div>

  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">Toolbars</span>
        <ul class="box-toolbar">
          <li>
            <form class="fill-up" style="width: 100px">
              <label class="input-with-submit">
                <input type="text" placeholder="Search..."/>
                <button type="submit" class="submit-icon">
                  <i class="icon-search"></i>
                </button>
              </label>
            </form>
          </li>
        </ul>
      </div>

      <div class="box-content padded">
        <div class="btn-toolbar" style="margin: 0;">
          <div class="btn-group">
            <button class="btn btn-default"><i class="icon-file"></i></button>
            <button class="btn btn-default"><i class="icon-folder-open-alt"></i></button>
            <button class="btn btn-default"><i class="icon-save"></i></button>
          </div>
          <div class="btn-group">
            <button class="btn btn-default"><i class="icon-cut"></i></button>
            <button class="btn btn-default"><i class="icon-copy"></i></button>
            <button class="btn btn-default"><i class="icon-paste"></i></button>
          </div>
          <div class="btn-group">
            <button class="btn btn-default"><i class="icon-download-alt"></i></button>
            <button class="btn btn-default"><i class="icon-search"></i></button>
            <button class="btn btn-default"><i class="icon-lock"></i></button>
            <button class="btn btn-default"><i class="icon-comment-alt"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row-fluid">
  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">Icon Buttons</span>
        <ul class="box-toolbar">
          <li>
            <form class="fill-up" style="width: 100px">
              <label class="input-with-submit">
                <input type="text" placeholder="Insert coin..."/>
                <button type="submit" class="submit-icon">
                  <i class="icon-angle-right"></i>
                </button>
              </label>
            </form>
          </li>
        </ul>
      </div>

      <div class="box-content padded">
        <button class="btn btn-blue"><i class="icon-home"></i> Home</button>
        <button class="btn btn-default"><i class="icon-cog"></i> Options</button>
        <button class="btn btn-default"><i class="icon-bar-chart"></i> Charts</button>

        <div class="btn-group">
          <button class="btn btn-default"><i class="icon-wrench"></i> Actions</button>
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>

        <div class="btn-group">
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="icon-pencil"></i> Edit <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-cut"></i> Cut</a></li>
            <li><a href="#"><i class="icon-copy"></i> Copy</a></li>
            <li><a href="#"><i class="icon-paste"></i> Paste</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="span6">
    <div class="box">
      <div class="box-header relative">
        <span class="title">Triangle buttons</span>
        <span class="triangle-button blue"><i class="icon-question-sign"></i></span>
      </div>

      <div class="box-content padded relative">
        <p>Any icons you see in this theme are FontAwesome. Abuse them :)</p>

        <div class="row-fluid">
          <% icons = %w(plus bell ok pencil) %>
          <% %w(red green blue orange).each_with_index do |color, index| %>
          <div class="span3">
            <div class="well relative">
              <span class="triangle-button <%= color %>"><i class="icon-<%= icons[index] %>"></i></span>
              some content
            </div>
          </div>
          <% end %>
        </div>

        <p>You can add triangle buttons to any container. Here I'm using bootstrap's wells</p>
      </div>
    </div>
  </div>
</div>

<div style="height: 150px;"></div>